<!--
 * @Author: ChunLai
 * @Date: 2022-04-18 16:24:34
 * @LastEditTime: 2025-09-10 17:23:20
 * @Description: 保障责任列表操作
 * @FilePath: \02.bldinsure\src\views\count\components\LiabilityList.vue
-->
<template>
  <div class="liability-module w100">
    <div
      :class="['van-checkbox pd8_tb', duty.desc ? 'btm_line' : '']"
      v-for="(duty, index) in dutyList"
      :key="`${duty.value}${index}`"
    >
      <div
        class="mt2"
        @click="changDutys(!duty.isCheck, index)"
        v-if="!duty.radioOptions"
      >
        <div
          :class="[
            'van-checkbox__icon van-checkbox__icon--square',
            duty.isCheck ? 'van-checkbox__icon--checked' : '',
          ]"
          style="font-size: 14px"
        >
          <i
            class="van-icon van-icon-success"
            :class="{ checked_i: duty.isCheck }"
          ></i>
        </div>
      </div>
      <div class="van-checkbox__label w100">
        <div class="flex pb5">
          <span class="lh16 label-w">{{ duty.label }}</span>
          <FieldDescMode
            :label="duty.label"
            :desc="duty.desc"
            v-if="duty.desc"
          />
        </div>
        <RadioTwoSpan
          :list="duty.radioOptions"
          :duty="duty"
          :fid="index"
          @clickEvent="changeDutyRadio"
          v-if="duty.radioOptions"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import FieldDescMode from "./FieldDescMode";
import RadioTwoSpan from "./RadioTwoSpan";
export default {
  name: "LiabilityList",
  props: {
    insuData: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    FieldDescMode,
    RadioTwoSpan,
  },
  computed: {
    ...mapGetters({
      apiBbrMult: "insert/apiBbrMult",
      applicant: "insert/applicant",
    }),
    dutyList() {
      let res = [];
      if (this.insuData.dutyList) {
        res = this.insuData.dutyList;
      }
      return res;
    },
    checks() {
      let res = [];
      if (this.insuData.dutyCodes) {
        res = this.insuData.dutyCodes;
      }
      return res;
    },
  },
  data() {
    return {};
  },
  methods: {
    changDutys(checkVal, index) {
      let duty = JSON.parse(JSON.stringify(this.dutyList));
      duty[index].isCheck = checkVal;
      // 康多保（2024 版）
      if (this.mainRiskCode == "5931" && !duty[0].isCheck && checkVal) {
        if (index == 1) {
          return this.$toast(
            "选择“前症疾病保险金”责任，需搭配选择“轻症疾病保险金”责任"
          );
        }
        if (index == 2) {
          return this.$toast(
            "选择“中症疾病保险金”责任，需搭配选择“轻症疾病保险金”责任"
          );
        }
      }
      if (this.mainRiskCode == "1926") {
        const fd2Dty = duty.find((d) => d.value == "3");
        if (fd2Dty && fd2Dty.isCheck) {
          const insuRela = this.apiBbrMult[0].relationToAppnt || "",
            appntOccu = this.applicant.occupationClass || "1";
          if (insuRela == "4") {
            return this.$toast(
              "选择“投保人意外身故或全残豁免保险费”责任，投被保人不能为同一人"
            );
          } else if (appntOccu >= 5) {
            return this.$toast(
              "选择“投保人意外身故或全残豁免保险费”责任，投保人职业五级（含）以上职业不得投保本险"
            );
          }
        }
      }
      this.$store.dispatch("risks/setRisks", {
        varietyCode: this.insuData.varietyCode,
        type: "dutyList",
        val: duty,
      });
      this.$forceUpdate();
    },
    changeDutyRadio(index, duty, ele) {
      if (duty.forbid) {
        return;
      }
      let dutys = JSON.parse(JSON.stringify(this.dutyList));
      dutys[index].value = ele.value;
      dutys[index].isCheck = ele.value !== "0";
      this.$store.dispatch("risks/setRisks", {
        varietyCode: this.insuData.varietyCode,
        type: "dutyList",
        val: dutys,
      });
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="less" scoped>
.label-em {
  color: #999999;
  font-size: 12px;
  font-style: normal;
}

.radio-list {
  display: flex;
  flex-wrap: wrap;
  padding-top: 5px;

  span {
    padding: 0 5px;
    border-radius: 4px;
    min-width: 60px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background-color: #f2f2f2;
    color: #444;
    font-size: 13px;
    margin-bottom: 4px;

    &.bg-col {
      background-color: #fb8c89;
      color: #fff;
    }

    &:not(:last-child) {
      margin-right: 8px;
    }

    &.forbid-btn {
      color: #999999;
    }
  }
}

.checked_i {
  border-color: #f54040;
  background-color: #f54040;
}

.liability-module {
  /deep/.van-checkbox {
    // margin-bottom: 10px;
    align-items: flex-start;
  }
}
</style>
